import React ,{PureComponent,Fragment} from 'react'
import PropTypes from 'prop-types'
import {connect} from 'dva'
import {Button,Row,Form,Icon,Input} from 'antd'
import styles from './style.less'
import {Link} from "react-router-dom"


const FormItem = Form.Item

const mapStateToProps = (state) => {
  return state['login'];
}

const mapDispatchToProps  = (dispatch) => {
  return {
    login: (username, password) => {
      dispatch({type:'login/login', payload:{username:username, password:password}});
    }
  }
}

@connect( mapStateToProps, mapDispatchToProps)
@Form.create()
class Login extends PureComponent{
    handleLoginClick =() =>{
        const {dispatch,form} = this.props
        const {validateFieldsAndScroll} = form
        validateFieldsAndScroll ((errors,values) =>{
           // values.password = md5(values.password);
           const {username, password}  = values;
            if(errors){
                return
            }
            this.props.login(username, password);
        })
    }

    render() {
        const {loading,form} = this.props
        const {getFieldDecorator} = form


    return(
        <Fragment>
            <div className={styles.form} >
            <h2 className={styles.form.h2}>埃科法OA系统</h2>
               <form>
                   <FormItem hasFeedBack>
                   {getFieldDecorator('username',{
                       rules:[
                           {
                               required:true,
                           },
                       ],
                   })(
                       <Input
                        onPressEnter = {this.handleLoginClick}
                        placeholder = "用户名"
                       />
                   )}
                   </FormItem>
                   <FormItem hasFeedback>
                    {getFieldDecorator('password', {
                        rules: [
                        {
                            required: true,
                        },
                        ],
                    })(
                        <Input
                        type="password"
                        onPressEnter={this.handleLoginClick}
                        placeholder="密码"
                        />
                    )}
                    </FormItem>
                    <Row>
                        <Button
                            type="primary"
                            onClick={this.handleLoginClick}
                           // loading={loading.effects.login}
                        >
                            <h2 style={{color:"white"}}>登陆</h2>
                        </Button>
                    </Row>
                    <Row style={{marginTop:"20px"}}>
                        <Link to="/register/index">
                        <Button
                            type = "primary"
                        >
                         <h2 style={{color:"white"}}>注册</h2>
                        </Button>
                        </Link>
                    </Row>
               </form>
            </div>
        </Fragment>
     )
   }
}
Login.propTypes = {
    form: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object,
  }

  export default Login
